<template>
	<view class="cart-page">
		<item-nav-bar text="购物车" :close="cartIsEmpty" @editing="edit" class="line" />
		<scroll-view :show-scrollbar="false" class="margin-top">
			<cart-login-bar v-if="!isLogin" />
			<view class="content" v-if="!isLogin">
				<view>
					<image src="../../static/img/cart/null.svg" alt="" />
				</view>
				<text class="text">登录后可同步购物车中商品</text>
			</view>
			<view v-if="shopNum">
				<cart-shop-good v-for="(shop, index) in shopList" :key="index" :shopInfo="shop" :shopId="shop.id"
					ref="goodList" />
			</view>
			<empty style="background-color: rgb(242, 242, 242)" v-else description="空空如也" />
			<recommend ref="recommend" v-show="!isEditing || !shopNum" />

			<back-top @click.native="backTop" v-show="IsBottom" />
		</scroll-view>

		<cart-operation-bar ref="checkOut" v-show="!cartIsEmpty" :editing="isEditing" />
	</view>
</template>
<script>
	import CartOperationBar from "./childCpn/CartOperationBar";
	import CartLoginBar from "./childCpn/CartLoginBar";
	import CartShopGood from "./childCpn/CartShopGood";

	import Empty from "../../components/common/Empty/Empty";
	import BackTop from "components/content/BackTop/BackTop";

	import {
		debounce
	} from "common/utils";
	import Recommend from "components/common/Recommend/Recommend";

	import ItemNavBar from "components/common/Items/ItemNavBar";

	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";

	export default {
		name: "Cart",
		data() {
			return {
				ifreload: true,
				goodRecommend: null,
				RecommendLoad: "refresh",
				close: false,
				isEditing: false,
			};
		},
		components: {
			BackTop,
			Recommend,
			ItemNavBar,
			CartOperationBar,
			CartLoginBar,
			CartShopGood,
			Empty
		},
		computed: {
			...mapGetters(["cartIsEmpty"]),
			...mapState(["shopList", "isLogin", "shopNum"]),
		},
		methods: {
			...mapMutations(["setLogin"]),
			backTop() {
				this.$refs.scroll.BackTop();
			},
			ifBottom(tag = false) {
				this.IsBottom = tag;
			},
			edit(isEditing) {
				this.isEditing = isEditing;
			},
		},

		activated() {
			if (!uni.getStorageSync('token')) {
				this.setLogin(false);
			}
		},

		deactivated() {
			this.isEditing = false;
		},

	};
</script>
<style lang="scss" scoped>
	.cart-page {
		background-color: rgb(242, 242, 242);

		.line {
			background-color: white;
			border-bottom: 2rpx solid rgb(229, 229, 229);
			box-sizing: border-box;
			top: 0;
			position: fixed;
			z-index: 1;
		}

		.content {
			height: 40vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100vw;
		}


		.text {
			display: block;
		}

	}
</style>
